<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECG心电图分类系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .ecg-waveform {
            height: 200px;
            border: 1px solid #e2e8f0;
            background-color: #f8fafc;
            overflow-x: auto;
        }
        .result-card {
            transition: all 0.3s ease;
        }
        .result-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .upload-dropzone {
            border: 2px dashed #94a3b8;
            border-radius: 0.5rem;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .upload-dropzone:hover {
            border-color: #3b82f6;
            background-color: #ebf2ff;
        }
        .btn-primary {
            background-color: #3b82f6;
            color: white;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background-color: #2563eb;
            transform: translateY(-1px);
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <header class="text-center mb-12">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">ECG心电图分类系统</h1>
            <p class="text-gray-600 max-w-2xl mx-auto">使用Transformer神经网络分析心电图数据，识别心脏健康状况</p>
        </header>
        
        <div class="grid md:grid-cols-2 gap-8 mb-12">
            <!-- 左侧：数据输入区 -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                    </svg>
                    输入心电图数据
                </h2>
                
                <!-- 文件上传区 -->
                <div class="upload-dropzone mb-6" id="dropzone">
                    <input type="file" id="file-upload" accept=".csv" class="hidden">
                    <svg class="w-12 h-12 text-gray-400 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                    </svg>
                    <p class="text-gray-500 mb-2">拖放CSV文件到此处，或点击上传</p>
                    <button type="button" id="browse-btn" class="btn-primary px-4 py-2 rounded-md text-sm font-medium">
                        浏览文件
                    </button>
                    <p class="text-xs text-gray-400 mt-2">CSV文件应包含一列名为'heartbeat_signals'的心电图数据</p>
                </div>
                
                <!-- 手动输入区 -->
                <div class="mb-6">
                    <h3 class="text-md font-medium text-gray-700 mb-2">
                        <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        手动输入数据
                    </h3>
                    <textarea id="ecg-input" rows="4" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="输入心电图数据（用逗号分隔）"></textarea>
                    <p class="text-xs text-gray-400 mt-1">示例: 0.12,0.34,-0.21,0.56,...</p>
                </div>
                
                <!-- 波形预览 -->
                <div>
                    <h3 class="text-md font-medium text-gray-700 mb-2">
                        <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 8h4m0 4h4m-4-8l-4 4-4-4"></path>
                        </svg>
                        波形预览
                    </h3>
                    <div class="ecg-waveform" id="waveform-preview">
                        <canvas id="waveform-canvas" width="500" height="150"></canvas>
                    </div>
                </div>
                
                <!-- 预测按钮 -->
                <button id="predict-btn" class="btn-primary w-full py-3 rounded-md text-base font-medium disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <svg class="w-5 h-5 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    分析心电图
                </button>
            </div>
            
            <!-- 右侧：结果展示区 -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                    </svg>
                    分析结果
                </h2>
                
                <!-- 状态提示 -->
                <div id="status-message" class="mb-6 p-4 bg-blue-50 border border-blue